<template>
  <div>
    <Layout />
    <el-container class="app-item-contain">
      <el-header class="align-center">
        <h1>{{ "学习巩固" }}</h1>
      </el-header>
      <el-main>
        <el-form
          :model="answer"
          ref="form"
          v-loading="formLoading"
          label-width="100px"
        >
          <br />
          <QuestionEdit
            :qType="problem.type"
            :question="problem"
            :answer="answer"
          />
          <br />
          <div v-if="completed">
            <div>答案：{{ problem.answer }}</div>
            <div>章节：{{ problem.chapter }}</div>
            <div>难度：{{ problem.difficulty }}</div>
            <div>解析：{{ problem.explanation }}</div>
            <div>知识点：{{ problem.knowledge }}</div>
          </div>
          <br />
          <div
            style="
              display: flex;
              justify-content: space-evenly;
              align-items: center;
            "
          >
            <el-row class="do-align-center">
              <el-button type="primary" @click="submitForm">提交</el-button>
            </el-row>
            <el-row class="do-align-center">
              <el-button type="primary" @click="nextProblem">下一题</el-button>
            </el-row>
          </div>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { formatSeconds } from "@/utils";
import QuestionEdit from "../components/QuestionEdit";
import {
  commitPractice,
  getErrorPracticesByStudentId,
  getPracticesByKnowledgeId,
} from "@/api/study";
// import examPaperApi from "@/api/examPaper";
import Layout from "@/layout";
// import examPaperAnswerApi from "@/api/examPaperAnswer";

export default {
  components: { QuestionEdit, Layout },
  data() {
    return {
      problems: [],
      formLoading: false,
      answer: {},
      // {
      //   "answer": "",
      //   "questionId": 6,
      //   "studentId": 1

      // }
      problem: {},
      index: 0,
      completed: false,
    };
  },
  created() {
    this.formLoading = true;
    this.getErrorPracticesByStudentId();
  },
  mounted() {},
  methods: {
    getErrorPracticesByStudentId() {
      let _this = this;
      return getErrorPracticesByStudentId({
        studentId: 1,
        currrent: 1,
        size: 10,
      })
        .then((res) => {
          console.log(res);
          _this.problems.push(...(res.records || []));
          _this.problem = _this.problems[0];
          _this.answer.problemId = _this.problems[0].problemId;
          _this.answer.studentId = 1;
          _this.problems.forEach((item) => (item.completed = false));
        })
        .catch((e) => {
          _this.$message.error(e);
        })
        .finally(() => {
          _this.formLoading = false;
        });
    },
    formatSeconds(theTime) {
      return formatSeconds(theTime);
    },
    questionCompleted(completed) {
      return this.enumFormat(this.doCompletedTag, completed);
    },
    goAnchor(selector) {
      this.$el.querySelector(selector).scrollIntoView({
        behavior: "instant",
        block: "center",
        inline: "nearest",
      });
    },
    submitForm() {
      let _this = this;
      _this.$modal.confirm("是否提交答案").then(function () {
        _this.completed = true;
        _this.problem.completed = true;
        if (_this.answer.result == _this.problem.answer) {
          _this.$message.success("答对了");
          _this.problem.ok = true;
        } else {
          _this.$message.error("答错了");
          _this.problem.ok = false;
        }
      });
    },
    nextProblem() {
      let _this = this;
      _this.$modal.confirm("是否进入下一题").then(function () {
        if (_this.completed) {
          _this.completed = false;
          _this.answer.result = null;
          _this.index++;
          if (_this.index <= _this.problems.length - 1) {
            _this.problem = _this.problems[_this.index];
            _this.answer.problemId = _this.problems[_this.index].problemId;
          } else {
            let sum = 0;
            _this.problems.forEach((item) => (item.ok ? sum++ : (sum = sum)));
            _this.$modal
              .confirm(
                "学习结束" +
                  "你的学习成果(对/总)" +
                  sum +
                  "/" +
                  _this.problems.length
              )
              .then(function () {});
          }
        }else{
          _this.$message.error("没提交呢");
        }
      });
    },
  },
  computed: {
    ...mapGetters("enumItem", ["enumFormat"]),
    ...mapState("enumItem", {
      doCompletedTag: (state) => state.exam.question.answer.doCompletedTag,
    }),
  },
};
</script>

<style lang="scss" scoped>
.align-center {
  text-align: center;
}

.exam-question-item {
  padding: 10px;

  .el-form-item__label {
    font-size: 15px !important;
  }
}

.question-title-padding {
  padding-left: 25px;
  padding-right: 25px;
}
</style>
